<template>
  <div class="page_box1">
    <div class="title">CustomChart3</div>
    <div class="echart_box">
      <BaseEcharts :options="options" :initedFunction="initedFunction" />
    </div>
  </div>
</template>

<script>
import BaseEcharts from "@/views/package/echarts/components/BaseEcharts";
import { getOptions } from "./options/customOptions3";
export default {
  components: {
    BaseEcharts,
  },
  data() {
    return {
      options: null,
    };
  },
  methods: {
    getData() {
      this.options = getOptions();
    },
    // 实例化回调
    initedFunction(chart) {
      console.log("测试", chart);
      chart.on("click", function (params) {
        // 控制台打印数据的名称
        const {data} = params
         console.log('data',data);
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.page_box1 {
  width: 100%;
  height: 500px;
  display: block;
  .echart_box {
    // width: 400px;
    // height: 400px;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
  }
}
</style>
